<!DOCTYPE html>
<html>
	<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<head>
		<title>An African Language Short Story Competition</title>
	</head>
<?php include 'submitdatabaseinfo1.php';?>

	<body>
	    <ul>
                        <li><a id="home" href="index1.php">Home</a></li>
                        <li><a id="original" href="submit1.php">Original Story Submission</a></li>
                        <li><a id="translation" href="submittranslation1.php">Translated Story Submission</a></li>
			<li><a id="stories" href="displaystories1.php">Submitted Stories</a></li>
                        <li><a id="evaluate" class="active" href="#">Evaluate</a></li>
			<li><a id="statistics" href="submissionstatistics1.php">Submissions per Language</a></li>
                        <li><a id="coordinate" href="coordinator1.php">Coordinator Application</a></li>
                        <li><a id="contact" href="contact1.php">Contact</a></li>
                        <li><a id="resources" href="resources1.php">Resources</a></li>
                        <li><a id="flyers" href="flyers1.php">Flyers</a></li>
                        <li><a id="faq" href="faq1.php">Frequently Asked Questions</a></li>
                        <li><a id="privacy" href="privacy1.php">Privacy</a></li>
	    </ul>
	    <header>
			<h1>Tuvute Pamoja
			<a href="https://deeplearningindaba.com">
                         <img src="images/deeplearningindaba.svg" alt="Deeplearning Indaba" style="height:60px">
			</a></h1>
        </header>
		<h1 id="title">An African Language Short Story Competition</h1>
		<section>
			<h3 id="descriptiontitle">Story Evaluation</h3>


<div>
			<p id="descriptiontext1">
If you have made a submission of an original story or a translation, you can evaluate 
stories in languages in which you have made a submission.  Your evaluation will help 
other story writers and translators improve their work.  Stories with the highest 
scores will win prizes.  A prize of $40 will be given to the author of the best 
original short story in each language. A prize of $40 will be given to the translator 
of the best translated short story in each language.  A prize of $40 will be given 
to the author of the best translated short story in each language.  Please evaluate 
stories will based on a 5 point scale (5 excellent, 4 very good, 3 good, 2 average, 
1 improvement needed) on:</p>
			<ol type="a">
			<li id="descriptiontext2">Grammar and spelling</li><br>
			<li id="descriptiontext3">Theme and plot</li><br>
			<li id="descriptiontext4">Style</li><br>
			<li id="descriptiontext5">Cultural relevance</li><br>
			<li id="descriptiontext6">Overall impression</li><br>
			</ol>
			<p id="descriptiontext7">The average score will be used 
                        to rank stories, in case of a tie, the organizing committee 
                        will randomly choose one story to receive a prize.</p>
			</div>
		</section>
		<section>
<div>
<p>Evaluation is closed</p>
<!--
<label id="votecode" for="votecode">Please enter the voting code you received by email
</label><br>
<input type="votecode" id="votecodeinput" name="votecodeinput" style="width:375px"><br>
<p>
      <button id="submitvotecode" name="submitvotecode" onclick="checkvotecode()" >Submit vote code
</button>
    </p>
-->
</div>
<div id="story">
</div>
<div>
 <h3 id="evaluationscaletitle"> Evaluation scale</h3>
<ol>
<li id="evaluation1">Improvement needed</li><br>
<li id="evaluation2">Average</li><br>
<li id="evaluation3">Good</li><br>
<li id="evaluation4">Very good</li><br>
<li id="evaluation5">Excellent</li><br>
</ol>
</div>
<div id="storyevaluation">
<table id="storiestoevaluate" ></table>
	</div>
	<div id="submissionresponse">
        </div>
	</section>
	<section>
                        <div id="keyboarddiv">
                        <?php// include "softkeyboard.php" ;?>
			</div>
	</section>
</body>
<?php include 'footer.php';?>
<script>
function evaluatestory(id) {
  var comment = document.getElementById(id+"C").value;
  var grammarandspelling = document.getElementById(id+"GandS").value;
  var themeandplot = document.getElementById(id+"TandP").value;
  var style = document.getElementById(id+"S").value;
  var culturalrelevance = document.getElementById(id+"CR").value;
  var overallimpression = document.getElementById(id+"OI").value;
  var voterid = document.getElementById(id+"voterid").value;
  if ( (grammarandspelling === "" ) ||
	  (themeandplot === "" ) ||
	  (style === "" ) ||
	  (culturalrelevance === "" ) ||
	  (overallimpression === "" ) )
  {
   document.getElementById(id+"evalresult").innerHTML = "Please fill all 5 numeric fields";
  }else{
   document.getElementById(id+"evalresult").innerHTML = "";
	  //use ajax to store scores in database
	  
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(id+"evalresult").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("POST","submitevaluation.php",true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("comment="+comment+"&grammarandspelling="+grammarandspelling+"&themeandplot="+themeandplot+"&style="+style+"&culturalrelevance="+culturalrelevance+"&overallimpression="+overallimpression+"&id="+id+"&voterid="+voterid);
	  	  
  }
	  
}
</script>
<script>
function checkvotecode() {
  var votecode = document.getElementById("votecodeinput").value;
  //use ajax to check languages can evaluate stories in
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("storiestoevaluate").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("POST","votecode1.php",true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("code="+votecode);
}
</script>
<script>
    function addcharacter(id)
	{
	  var charin = document.getElementById(id).value;
	  //var id = event.srcElement.id;
	  console.log(id);
	  console.log(charin);
	  var text = document.getElementById("draftcomment").value;
	  var input = document.getElementById("draftcomment");
	  var cursorpos = input.selectionStart;
          // A slow but reliable entry method
	  var start = text.substring(0,cursorpos);
	  var end = text.substring(cursorpos,text.length);
	  if (charin==="")
	  {
	      var character="";
	  }else if (id==="Backspace") {
	      var character="";
	      var start = start.substring(0,start.length-1);
	  }else if ((id==="Enter")||(id==="Tab")){
	      var character = charin;
	  }else{
	      var character = String.fromCharCode(charin);
	  }
	  document.getElementById("draftcomment").value = start + character + end;
	}
    function shiftwrap()
    {
      var value = document.getElementById("keyboardtype").value;
      shift(value);
    }
	function changecasewrap()
	{
      var value = document.getElementById("keyboardtype").value;
      changecase(value);
	}
	function altgrwrap()
	{
      var value = document.getElementById("keyboardtype").value;
      altgr(value);
	}
	function keyboardwrap()
    {
      var value = document.getElementById("keyboardtype").value;
	  keyboard(value);
	  if(value==="ara") {
		document.getElementById("draftcomment").dir="rtl";
      }else{
		document.getElementById("draftcomment").dir="ltr";
      }
 }
function getstory(storyid) {
 //use ajax to get story from database
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("story").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET","getstory1.php?primarykey="+storyid,true);
  xmlhttp.send();
}

</script>
<script type="text/javascript" src="js/afrikaanskeys.js"></script>
<script type="text/javascript" src="js/akankeys.js"></script>
<script type="text/javascript" src="js/amharickeys.js"></script>
<script type="text/javascript" src="js/arabickeys.js"></script>
<script type="text/javascript" src="js/bembakeys.js"></script>
<script type="text/javascript" src="js/camerooniankeys.js"></script>
<script type="text/javascript" src="js/dagbanikeys.js"></script>
<script type="text/javascript" src="js/englishkeys.js"></script>
<script type="text/javascript" src="js/ewekeys.js"></script>
<script type="text/javascript" src="js/gakeys.js"></script>
<script type="text/javascript" src="js/hausakeys.js"></script>
<script type="text/javascript" src="js/igbokeys.js"></script>
<script type="text/javascript" src="js/kikuyukeys.js"></script>
<script type="text/javascript" src="js/lingalakeys.js"></script>
<script type="text/javascript" src="js/lugandakeys.js"></script>
<script type="text/javascript" src="js/malikeys.js"></script>
<script type="text/javascript" src="js/sesothokeys.js"></script>
<script type="text/javascript" src="js/togokeys.js"></script>
<script type="text/javascript" src="js/wolofkeys.js"></script>
<script type="text/javascript" src="js/yorubakeys.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</html>

